<template>
  <div class="item-panel-list" :class="isExpanded ? 'expanded' : ''">
    <div class="item-panel-list-title" @click="isExpanded = !isExpanded">
      <i
        class="icon iconfont"
        :class="isExpanded ? 'icon-folderopen' : 'icon-Folderclose'"
      ></i>
      <span class="title">{{ items.name }}</span>
    </div>
    <ul v-if="items.children.length !== 0" class="item-panel-items">
      <item-panel-item
        v-for="(item, index) in items.children"
        :key="index"
        :item="item"
      ></item-panel-item>
    </ul>
    <div v-else class="item-panel-items">
      <div class="empty">
        <i class="icon iconfont icon-empty"></i>
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import ItemPanelItem from "./item-panel-item.vue";

export default {
  name: "item-panel-list",
  components: {
    ItemPanelItem,
  },
  props: {
    items: {
      type: Object,
      default: () => {
        return {
          name: "Flowchart 流程图",
          children: [],
        };
      },
    },
    initExpanded: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isExpanded: this.initExpanded,
    };
  },
};
</script>

<style>
ul,
li {
  list-style-type: none;
  list-style: none;
}

.empty {
  width: 100%;
  color: #c0c4cc;
  text-align: center;
}

.empty > .icon {
  display: inline-block;
  margin: 10px 0;
  font-size: 42px;
}

.empty > p {
  margin-bottom: 10px;
  font-size: 14px;
  user-select: none;
  color: rgba(0, 0, 0, 0.5);
}
</style>
